<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>房源详情</title>
	<meta name="renderer" content="webkit">
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
</head>
<body>
  <div class="room_1">
	  <img style="width:100%" id="imgTest" src="https://bpic.588ku.com/element_pic/00/16/08/1157ac888389bc5.jpg!/fw/254/quality/90/unsharp/true/compress/true"/>
  </div>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	$(function () {
        $.fn.ImgZoomIn = function () {
            bgstr = '<div id="ImgZoomInBG"  style=" background:#000000; filter:Alpha(Opacity=70); opacity:0.7; position:fixed; left:0; top:0; z-index:10000; width:100%; height:100%; display:none;">' + +'</div>';
            imgstr = '<img id="ImgZoomInImage" src="' + $(this).attr('src')+'" onclick=$(\'#ImgZoomInImage\').fadeOut();$(\'#ImgZoomInBG\').fadeOut(); style="cursor:pointer; display:none; position:absolute; z-index:10001;" />';
            if ($('#ImgZoomInBG').length < 1) {
                $('body').append(bgstr);
            }
            if ($('#ImgZoomInImage').length < 1) {
                $('body').append(imgstr);
            }
            else {
                $('#ImgZoomInImage').attr('src', $(this).attr('src'));
            }
            $('#ImgZoomInImage').css('left', $(window).scrollLeft() + ($(window).width() - $('#ImgZoomInImage').width()) / 2);
            $('#ImgZoomInImage').css('top', $(window).scrollTop() + ($(window).height() - $('#ImgZoomInImage').height()) / 2);
            $('#ImgZoomInBG').fadeIn();
            $('#ImgZoomInImage').fadeIn();
        };
        $("#imgTest").on("click", function () {
            $(this).ImgZoomIn();
        });

    })
</script>
</body>
</html>